<!-- ACCESSIBILITY NOTES -->
<div class="background-inverse">
  <div class="background-arrow-top-right l-padding-top-100">
    <section id="buttons-accessibility" class="docs">
      <header >
        <h3 class="docs-title"><i class="fa fa-wheelchair"></i> Semantics &amp; Accessibility</h3>
      </header>

      <div class="docs-content">
        <p>
          Buttons should be used responsibly with accessibility in mind. You should use <strong>anchor</strong> tags when you are linking to an external resource or an internal page link. Use the <strong>button</strong> tag when you have an application command such as <strong>add to shopping cart</strong>. Use <strong>input</strong> tags (such as the submit input type) when creating forms. If you would like to learn more on this subject we highly reccomend reading the following articles.</p>

        <ul class="docs-list">
          <li>
            <a href="http://formidablelabs.com/blog/2014/05/08/anchors-buttons-and-accessibility/">Anchors, Buttons, and Accessibility</a> by Formidable Labs.
          </li>

          <li>
            <a href="http://www.nngroup.com/articles/command-links/">Commands Links</a> article by the Nielsen Norman Group.</a>
          </li>

          <li>
            <a href="http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/">Links Are Not Buttons</a> by Karl Groves.
          </li>
        </ul>
      </div>
    </section>
  </div>
</div>